<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>我的网页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../css/swiper-bundle.min.css">
  <link rel="stylesheet" href="../css/homepage.css">
  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .left{

    width: 40%;
    height:380px ;
    float: right;
    right: 10%;
    position: absolute;
    top: 50%;
    z-index: 90;
    margin-top: -265px;
    line-height: 14px;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../imgs-zxl/one.jpg" alt="">
        <div class="left">
          <br>
          <p class="title"><span style="color:#e60012;">招牌锅底</span>-番茄火锅</p><br>
          <p class="redTxt"><span>一定要喝汤的番茄火锅</span></p><br>
          <p class="summary">精选日照充裕的阳光番茄，制酱炒制而成的番茄底料；推荐搭配河</p><br>
          <p class="su">鲜类食材。</p><br><br><br>
          <p class="btile"><b>锅底分类</b></p><br>
          <p class="cailiao">白味锅</p><br><br>
          <p class="btile"><b>覆盖区域</b></p><br>
          <p class="cailiao">全国覆盖</p>
        </div>
      </div>
      <div class="swiper-slide"><img src="../imgs-zxl/tow.jpg" alt="">
     
        <div class="left">
          <br>
          <p class="title"><span style="color:#e60012;">招牌锅底</span>-经典麻辣火锅</p><br>
          <p class="redTxt"><span>慢火熬煮4小时的经典麻辣锅底</span></p><br>
          <p class="summary">选用精选牛油与青花椒和红花椒、及多种辣椒慢火熬煮而成。锅底油</p><br>
          <p class="su">色红亮、汤味醇厚，越煮越香不变味。搭配蒜泥香油味碟，这样吃才</p><br>
          <p class="su">地道！</p><br><br><br><br><br><br>
          <p class="btile"><b>锅底分类</b></p><br>
          <p class="cailiao">红味锅</p><br><br>
          <p class="btile"><b>覆盖区域</b></p><br>
          <p class="cailiao">全国覆盖</p>
        </div>
      </div>
      <div class="swiper-slide"><img src="../imgs-zxl/three.jpg" alt="">
        <div class="left">
          <br>
          <p class="title"><span style="color:#e60012;">招牌锅底</span>-菌汤火锅</p><br>
          <p class="redTxt"><span>菌菇慢火熬煮2小时</span></p><br>
          <p class="summary">锅底汤色黄褐，清澈；菌香浓郁、爽口；推荐搭配涮食菌菇类食材。</p><br>

          <p class="btile"><b>锅底分类</b></p><br>
          <p class="cailiao">白味锅</p><br><br>
          <p class="btile"><b>覆盖区域</b></p><br>
          <p class="cailiao">全国覆盖</p>
        </div>
      </div>
      <div class="swiper-slide"><img src="../imgs-zxl/four.jpg" alt="">
        <div class="left">
          <br>
          <p class="title"><span style="color:#e60012;">招牌锅底</span>-清油麻辣火锅</p><br>
          <p class="redTxt"><span>植物油炒制,香辣浓郁不油腻</span></p><br>
          <p class="summary">严选花椒、辣椒、香辛料原料，地道川味火锅；传统工艺发酵豆瓣；</p><br>
          <p class="su">汤底色泽鲜红，口感香辣浓郁；推荐搭配涮食脆弹类动物食材。</p><br><br><br>
          <p class="btile"><b>锅底分类</b></p><br>
          <p class="cailiao">红味锅</p><br><br>
          <p class="btile"><b>覆盖区域</b></p><br>
          <p class="cailiao">全国覆盖</p>
        </div>
      </div>
      <div class="swiper-slide"><img src="../imgs-zxl/five.jpg" alt="">
        <div class="left">
          <br>
          <p class="title"><span style="color:#e60012;">招牌锅底</span>-三鲜火锅</p><br>
          <p class="redTxt"><span>色泽纯正，口感鲜香浓郁</span></p><br>
          <p class="summary">选用现代工艺萃取的结合肉类浓缩骨汤为汤底；可根据喜好搭配不同</p><br>
          <p class="su">的特色味碟均可，配合芝麻酱更佳！</p><br><br><br>
          <p class="btile"><b>锅底分类</b></p><br>
          <p class="cailiao">白味锅</p><br><br>
          <p class="btile"><b>覆盖区域</b></p><br>
          <p class="cailiao">全国覆盖</p>
        </div>
      </div>

    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination" ></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next" style="color:#e60012;"></div>
    <div class="swiper-button-prev" style="color:#e60012;"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../js/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>

</html>
